<template>
    <div>
        <div ref='queryHead'>
            <!-- 操作按钮 -->
            <div style="padding: 1px 0;">
                <el-button-group>
                    <el-button type="primary" icon="el-icon-search" size="mini">查看</el-button>
                </el-button-group>
                <el-button-group>
                    <el-button type="primary" icon="el-icon-plus" size="mini">添加</el-button>
                    <el-button type="primary" icon="el-icon-edit-outline" size="mini">修改</el-button>
                </el-button-group>
                <el-button-group>
                    <el-button type="primary" icon="el-icon-delete" size="mini">删除</el-button>
                    <el-button type="primary" icon="el-icon-refresh" size="mini">恢复</el-button>
                </el-button-group>
            </div>
            <!-- 查询头 -->
            <div style="background: white;padding: 10px 0 0 10px;border: solid 0.5px #ebeef5;border-left: none !important;">
                <el-form :inline="true" :model="formdata" size='mini' :style="{'max-width':formMaxWidth}">
                    <el-form-item label="审批人">
                        <el-input v-model="formdata.user" placeholder="审批人"></el-input>
                    </el-form-item>
                    <el-form-item label="活动区域">
                        <el-select v-model="formdata.region" placeholder="活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- 分页表格 -->
        <div>
            <!-- 表格数据 -->
            <div class="table-view" :style="{'height':tableHeight}">
                <el-table :data="dataList" :height="tableHeight" style="width: 100%" stripe border highlight-current-row @current-change="handleCurrentRow" >  
                    <el-table-column prop="date" label="日期" width="180">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页条 -->
            <div style="text-align: center;background:white;border-top: solid 1px #ebeef5;">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[20, 50, 100, 200]"
                    :page-size="20" layout="total, sizes, prev, pager, next, jumper" :total="count" style="padding:10px 0">
                </el-pagination>
            </div>
        </div>

    </div>
</template>
<script>

    export default {
        components: {

        },
        data() {
            return {
                formdata: {
                    user: '',
                    region: ''
                },
                page: 1,
                count: 666,
                dataList: [{ id:'1',date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { id:'2',date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '这是最后一行' }]
                , queryHeadHeight: 58
                , queryFormMaxWidth: 800
            }
        },
        created() {
            // console.log(this.dataList);

        },
        mounted() {
            console.log('mounted');
            this.queryFormMaxWidth = window.innerWidth - 210;
            this.queryHeadHeight = this.$refs.queryHead.offsetHeight;            
        },
        methods: {
            onSubmit() {
                // 提交表单
                console.log(this.formdata);
                console.log('submit!');
            },
            handleSizeChange(val) {
                // 变更每页条数
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                // 打开页数
                console.log(`当前页: ${val}`);
            },
            handleCurrentRow(currentRow,oldCurrentRow){
                console.log(currentRow);
                console.log(oldCurrentRow);
                console.log('表格选中行');
            }
        },
        computed: {
            tableHeight() {                                
                var topHeight = 70 + 48 + 5;
                topHeight += this.queryHeadHeight;                
                return (window.innerHeight - topHeight) + 'px';
            },
            formMaxWidth() {                
                setTimeout(() => {
                    // 设置宽度的时候，会导致高度变化，所以延后重新计算一次高度
                    this.queryHeadHeight = this.$refs.queryHead.offsetHeight;                                        
                }, 100);
                return this.queryFormMaxWidth + 'px';
            }
        }
    }
</script>
<style>
    .table-view {
        overflow: auto;
    }
</style>